import React, { Component } from 'react'
import { connect } from 'react-redux'
import { push } from 'connected-react-router'
import ListTable from 'components/ListTable'
import getProjectTeams from 'graphql/project/user/userList.graphql'
import getProjectTeamsPageInfo from 'graphql/project/user/userPageInfo.graphql'

const FileList = url => ({ data }) => (
  <React.Fragment>
    {data.project_member.map(member => (
      <ListTable.Row link={`${url}/${member.user_object.name}`}>
        <ListTable.Avatar src={member.user_object.avatar} text={member.user_object.name} />
        <ListTable.Cell>{member.role}</ListTable.Cell>
        <ListTable.Time>{member.create_at}</ListTable.Time>
      </ListTable.Row>
    ))}
  </React.Fragment>
)

class DatasetData extends Component {
  componentDidMount = () => {}

  render() {
    const { match, project } = this.props
    const { projectId } = project
    const newTeamUrl = `/project/${project.orgName}/${project.projectName}/user/member/new`
    const editMemberUrl = `/project/${project.orgName}/${project.projectName}/user/member/edit`
    const globalActions = [
      {
        text: '添加成员',
        url: newTeamUrl,
      },
    ]
    const RenderList = FileList(editMemberUrl)
    return (
      <ListTable
        globalActions={globalActions}
        search={{ text: '搜索成员' }}
        pagination={{
          query: getProjectTeamsPageInfo,
          name: 'project_member_aggregate',
          variables: {
            projectId,
          },
        }}
        listData={{
          query: getProjectTeams,
          variables: {
            projectId,
            limit: 10,
          },
          header: (
            <ListTable.Header>
              <ListTable.HeaderCell
                style={{
                  wordBreak: 'keep-all',
                  whiteSpace: 'nowrap',
                }}
              >
                名称
              </ListTable.HeaderCell>
              <ListTable.HeaderCell />
              <ListTable.HeaderCell>角色</ListTable.HeaderCell>
              <ListTable.HeaderCell>加入时间</ListTable.HeaderCell>
            </ListTable.Header>
          ),
          render: <RenderList />,
        }}
        holder={{
          description: '没有成员',
          action: {
            text: '添加项目成员',
            url: newTeamUrl,
          },
        }}
      />
    )
  }
}

const mapDispatchToProps = {
  link: path => push(path),
}

export default connect(
  null,
  mapDispatchToProps,
)(DatasetData)
